<template>
    <div class="more">
        <Navback class="pro" title="消息通知" left-text="返回" left-arrow></Navback>
        <div class="title">
            <div class="Information" @click="clickTab(index)" :class="[activeIndex == index ? 'active' : '']" v-for="(item, index) in tabdata">{{ item.title }}</div>
        </div>
        <div class="content">
            <!-- 甜蜜资讯 -->
            <div class="News">
                <div class="contents">
                    <div v-show="tab == 0" class="content-box" v-for="(item, index) in newsdata" :key="index">
                        <div class="img">
                            <img class="img-auto" :src="item.msgImg" />
                        </div>
                        <div class="notice">
                            <!-- <div class="handpick">精选</div> -->
                            <p>{{ item.msgTitle }}</p>
                        </div>
                    </div>
                    <!-- <div class="foot">已经到底啦~</div> -->
                </div>
            </div>
            <!-- 我的消息 -->
            <div class="myHour" v-show="tab == 1">
                <van-empty description="暂无消息" />
            </div>
        </div>
    </div>
</template>

<script>
import Navback from "../components/Navback.vue";
import { getMoreData } from "../api/MoreData.js";
export default {
    name: "More",
    components: {
        Navback,
        getMoreData,
    },
    data() {
        return {
            tabdata: [
                {
                    title: "甜蜜资讯",
                },
                {
                    title: "我的消息",
                },
            ],
            activeIndex: 0,
            newsdata: [],
            tab: 0,
        };
    },
    created() {
        getMoreData().then((data) => {
            this.newsdata = data.MoreData;
            // console.log(this.newsdata);
        });
    },
    methods: {
        clickTab(index) {
            if (this.activeIndex === index) {
                return;
            }

            this.activeIndex = index;
            this.tab = index;
        },
    },
};
</script>

<style lang="less" scoped>
.more {
    width: 100%;
    padding-bottom: 50px;
    .content{
        width: 100%;
        height: 100px;
        // background-color: pink;
        .myHour{
            width: 100%;
            height: 100px;
        }
    }
    .title {
        width: 100%;
        height: 40px;
        background-color: #fff;
        display: flex;
        justify-content: space-around;
        margin-bottom: 60px;
        .Information {
            font-size: 20px;
            line-height: 40px;
        }
        .active {
            border-bottom: 2px solid #e4393c;
            font-weight: 700;
        }
    }
    .News {
        width: 350px;
        height: 145px;
        margin: -55px auto;
        // background-color: #686969;
        .contents {
            width: 350px;
            height: 230px;
            //  background-color: red;
            margin-top: 10px;
            border-top-left-radius: 10px;
            // .foot{
            //     width: 350px;
            //     height: 43px;
            //     background-color: #f8f8f8;
            //     color: #686969;
            //     // background-color: pink;
            //     text-align: center;
            //     font-size: 15px;
            //     line-height: 43px;
            //     font-weight: 500;
            // }
            .content-box {
                .img {
                    width: 350px;
                    height: 160px;
                    background-color: green;
                    border-top-right-radius: 15px;
                    border-top-left-radius: 15px;
                    overflow: hidden;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .notice {
                    width: 350px;
                    height: 50px;
                    background-color: #fff;
                    margin-bottom: 15px;
                    display: flex;
                    align-items: center;
                    p {
                        font-size: 17px;
                        font-weight: 500;
                    }
                    // .handpick{
                    //     margin: 0 15px 0 15px;
                    //     color: #e4393c;
                    // }
                }
            }
        }
        .new {
            display: flex;
            align-items: baseline;
            background-color: #fff;

            .title {
                font-weight: 700;
                font-size: 16px;
                margin-left: 10px;
            }
            .more {
                color: #e4393c;
                margin: 10px 0 0 240px;
                font-weight: 550;
            }
        }
    }

    .pro {
        font-weight: 550;
    }
}
</style>
